<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑个人信息</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--    文件拖拽-->
    <link th:href="@{/plugins/dropzone/dropzone.css}">

    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

    <link rel="stylesheet" th:href="@{/plugins/imgUpload/public/index.css}">

    <link rel="stylesheet" type="text/css" id="style_sheet" th:href="@{/css/skins/default.css}">

    <link rel="stylesheet" th:href="@{/css/loginAndRegist.css}" id="theme-stylesheet">

</head>
<body>
<div class="dashboard-list">
    <h3 class="heading">
        <span class="navbar-left">Profile Edit</span>
        <div class="navbar-right">
            <a th:href="@{/user/updateUser}"><span class="glyphicon glyphicon-edit"></span>返回上一层</a>
        </div>
    </h3>


    <div class="dashboard-message contact-2 bdr clearfix">
        <div class="row">
            <div class="col-lg-3 col-md-3">
                <!-- Edit profile photo -->

            </div>
            <div class="col-lg-9 col-md-9">
                <form th:action="@{/user/updateUser}" method="post" >
                    <div class="row">
                        <div class="col-md-6">
                            <div class="dashboard-list">
                                <h3 class="heading">Change Password</h3>
                                <div class="dashboard-message contact-2">
                                    <form th:action="@{/user/password}" method="post" >
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="form-group name">
                                                    <label>Current Password</label>
                                                    <input id="old-password" class="input-material form-control" type="password" name="oldpassword" placeholder="请输入密码"   >
                                                    <div class="invalid-feedback">
                                                        密码错误，请重新输入
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group email">
                                                    <label>New Password</label>
                                                    <input id="register-password" class="input-material form-control" type="password" name="password" placeholder="请输入密码"   >
                                                    <div class="invalid-feedback">
                                                        密码必须在6~18位之间
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group subject">
                                                    <label>Confirm New Password</label>
                                                    <input id="register-passwords" class="input-material form-control"  type="password"  placeholder="确认密码"   >
                                                    <div class="invalid-feedback">
                                                        两次密码必须相同 且在6~10位之间
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="send-btn">
                                                    <input type="submit" class="btn btn-md button-theme" value="Change Password"/>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
        /*错误class  form-control is-invalid
        正确class  form-control is-valid*/
        var flagPas=false;
        var flagPass=false;
        var password;
        /*验证密码*/
        $("#old-password").change(function(){
            password=$("#old-password").val();
            if(password.length<6||password.length>18){
                $("#old-password").removeClass("form-control is-valid")
                $("#old-password").addClass("form-control is-invalid");
                flagPas=false;
            }else{
                // 判断该原始密码是否正确
                //若不正确，则不能进行更改操作
                $.ajax({
                    url:"[(@{/user/checkpassword})]",
                    data:{"password":password},
                    type:"post",
                    success:function (message) {
                        // console.log("message:"+message);
                        if (message==0){
                            //用户不正确，提示用户不能更改
                            $("#old-password").removeClass("form-control is-valid")
                            $("#old-password").addClass("form-control is-invalid");
                            flagName=false;
                        }else{
                            //密码正确，可以进行更改
                            $("#old-password").removeClass("form-control is-invalid")
                            $("#old-password").addClass("form-control is-valid");
                            flagName=true;
                        }
                    }
                })
            }
        })
        /*验证确认密码*/
        $("#register-passwords").change(function(){
            password=$("#register-passwords").val();
            if((password!=password)||(password.length<6||password.length>18)){
                $("#register-passwords").removeClass("form-control is-valid")
                $("#register-passwords").addClass("form-control is-invalid");
                flagPass=false;
            }else{
                $("#register-passwords").removeClass("form-control is-invalid")
                $("#register-passwords").addClass("form-control is-valid");
                flagPass=true;
            }
        })


        /*$("#regbtn").click(function(){
            if(flagName&&flagPas&&flagPass){
                localStorage.setItem("name",name);
                localStorage.setItem("passWord",passWord);
                location="login.html"
            }else{
                if(!flagName){
                    $("#register-username").addClass("form-control is-invalid");
                }
                if(!flagPas){
                    $("#register-password").addClass("form-control is-invalid");
                }
                if(!flagPass){
                    $("#register-passwords").addClass("form-control is-invalid");
                }
            }
        })*/
    })
</script>

</body>
</html>